<template>
	<view class="evaluate">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="查看评价"></tab-top>
		<!-- #endif -->
		<view class="main_items">
			<view class="head">
				<view class="head_l">
					<view class="img"><image :src="evaluateData.account_info.head_images || '/static/bg/img.png'"></image></view>
					<view class="head_box">
						<view class="name">{{ evaluateData.account_info.username }}</view>
						<view class="time">{{ time }}</view>
					</view>
				</view>
				<view class="head_r">
					<uni-rate v-if="evaluateData.clean_grade" max="5" size="16" :value="evaluateData.clean_grade" disabled="true"></uni-rate>
				</view>
			</view>
			<view class="center">{{ evaluateData.content }}</view>
			<view class="foot" v-if="evaluateData.image"><image v-for="(k, i) in evaluateData.image" :key="i" :src="k + '?imageView2/1/w/888/h/664'"></image></view>
			<view class="room">
				<view class="title1">{{title1}}</view>
				<view class="title2">{{title2}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import moment from 'moment';
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
	data() {
		return {
			evaluateData: {},
			time: '',
			title1:'',
			title2:''
		};
	},
	async onLoad(e) {
		this.title1 = e.title1;
		this.title2 = e.title2;
		let [_evaluate, evaluate] = await this.evaluate(e.id);
		this.evaluateData = evaluate.data.data;
		console.log(this.evaluateData.clean_grade)
		this.time = moment(this.evaluateData.create_time * 1000).format('YYYY-MM-DD HH:mm');
	},
	methods: {
		evaluate(id) {
			return this.getReq({
				url: 'both/evaluate/' + this.isLogin().id,
				data: {
					order_id: id
				}
			});
		}
	},
	components: {
		uniRate
	}
};
</script>

<style lang="scss" scoped>
.evaluate {
	.main_items::after {
		content: '';
		display: block;
		width: 702upx;
		height: 1upx;
		margin: 0 auto;
		margin-top: 30upx;
		background-color: #e5e5e5;
	}
	.main_items {
		width: 702upx;
		padding: 0 24upx;
		.head {
			width: 100%;
			height: 140upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.head_l {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.img {
					width: 80upx;
					height: 80upx;
					margin-right: 22upx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.head_box {
					font-size: 28upx;
					.time {
						font-size: 24upx;
						color: #999999;
					}
				}
			}
			.head_r {
				image {
					width: 22upx;
					height: 22upx;
					margin-left: 4upx;
				}
			}
		}
		.center {
			font-size: 28upx;
			line-height: 44upx;
			width: 700upx;
			display:block;
			word-break: break-all;
			word-wrap: break-word;
		}
		.foot {
			padding-top: 30upx;
			width: 100%;
			image:nth-last-child(1) {
				margin-right: 0upx;
			}
			image {
				width: 222upx;
				height: 166upx;
				background-color: #3595f9;
				border-radius: 8upx;
				margin-right: 16upx;
			}
		}
		.room{
			background: #f8f8f8;
			margin: 16upx;
			padding: 24upx;
			.title1{
				font-size: 30upx;	
			}
			.title2{
				font-size: 24upx;
				color: #999;
			}
		}
	}
}
</style>
